<template>
    <div class="page-invite">
       <div class="shadown" v-show="shadown" @click="shadown=false" @touchmove.prevent>
        <img :src="shadownimg" v-show="shadown"/>
       </div>
        <!-- 头部内容 -->
        <header>
          <img v-bind:src="headerImg" />
          <span class="h-time">活动时间：2017年12月01日起 - 2018年03月31日</span>
          <div class="h-data" style="border-width:1px;">
            <div class="h-data-peo" >
              好友数(人)
              <p>{{SessionObj.inviteNum}}</p>
            </div>
            <div class="h-data-all" >
              累计分红(元)
              <p>{{SessionObj.totalMon}}</p>
            </div>
            <div class="h-data-ready">
              待发分红(元)
              <p>{{SessionObj.readyMon}}</p>
            </div>
          </div>
        </header>
        <!-- 侧边 -->
        <div class="btn-fixed-left">
          <div @click="showRules" class="btn-rule">活动规则</div>

          <div @click="goguide" class="btn-help">赚钱攻略</div>
        </div>
        <!-- 列表图片 -->
        <ul>
          <li v-for="item in imgList" v-bind:key="item">
            <img v-bind:src="item" />
          </li>
        </ul>
        <!-- 悬浮按钮 -->
        <div class="btn-box">
          <div @click="authorize(1)" class="btn btn-share-url">分享邀请</div>
          <div @click="authorize(2)" class="btn btn-share-img">当面邀请</div>
        </div>
        <!-- 活动规则 -->
        <mt-popup class="rules-box" v-bind:closeOnClickModal="popRulesClick"  v-model="popupRules">
            <h4>活动规则</h4>
             <div class="rules-body">
              1、活动时间：2017年12月01日起 - 2018年3月31号<br />
              2、好友注册之日起180天内，每笔投资收益的16.8%奖励邀请人（180天的有效期或根据平台运营情况延长）；<br />
              3、16.8%奖励仅计算除了新手标外产品的<span>基础利率</span>部分，不包含产品加息及加息券收益部分<br />
              4、奖励发放：<br/><span>投资送礼：</span>20元现金奖励将在投资产品计息后发放到您的账户中<br /><span>每笔返现：</span>每月第一个工作日，以现金红包的方式发放至您的账户中<br/>
              5、好友收益计算公式：收益=投资金额*投资期限*年化利率/365<br />
              6、如有作弊行为，取消一切奖励，本活动最终解释权归优选金融所有<br />
            </div>
            <div @click="closeRules" class="rules-close"></div>
        </mt-popup>
        <!-- 二维码弹框 -->
        <mt-popup
          class="popup-qrcode"
          v-model="popupVisible"
          position="bottom">
          <div @click="closepopup">
            <div class="p-qrcode-header">
              <p>我正在使用优选金融APP</p>
              <p>平台安全靠谱，快和我一起赚钱吧</p>
            </div>
            <div class="p-qucode-body">
               <img v-bind:src="imgQrCode" />
            </div>
            <div class="popup-qrcode-close"></div>
          </div>
        </mt-popup>
    </div>
</template>

<script>
import { Popup, MessageBox } from "mint-ui";
import wx from "weixin-js-sdk";

export default {
  name: "invite_info",
  data() {
    return {
      shadown: false,
      shareQrCode: "", // 邀请二维码
      SessionObj: {
        hasbind: false,
        openId: "",
        inviteNum: 0, // 邀请人数
        totalMon: "-", // 累计金额
        readyMon: "-", // 待发金额
        invitationCode: ""
      },
      popRulesClick: false,
      popupRules: false,
      GetQrImgFlag: false,
      popupVisible: false,
      headerImg: require("@/public/imgs/invite/img-headers.jpg"),
      imgQrCode: require("@/public/imgs/invite/img-share-qrcode.jpg"),
      imgList: [
        require("@/public/imgs/invite/img-step1.jpg"),
        require("@/public/imgs/invite/img-step2.jpg"),
        require("@/public/imgs/invite/img-step3.jpg")
      ],
      shadownimg: require("@/public/imgs/invite/wixinshown.png")
    };
  },
  created() {
    try {
      if (
        sessionStorage.getItem("jump") &&
        sessionStorage.getItem("jump") == "true"
      ) {
        sessionStorage.setItem("jump", "false");
        window.location.href = `${this.Interface.getWeixinHost}wx/oauth`;
      }
    } catch (e) {}

    this.$nextTick(function() {
      this.getInviteDetail();
    });
    this.$watch("popupRules", function(newValue, oldValue) {
      if (newValue) {
        $("body").css("overflow", "hidden");
      } else {
        $("body").css("overflow", "auto");
      }
    });

    this.$watch("shadown", function(newValue, oldValue) {
      if (newValue) {
        $("body").css("overflow", "hidden");
      } else {
        $("body").css("overflow", "auto");
      }
    });
  },
  mounted() {
    // 为当前页面的body添加class
    $("body").addClass("body-invite");

    // 设置页面标题
    this.Uitis.setTitle("邀请有礼");
  },
  methods: {
    _utf8_encode(string) {
      string = string.replace(/\r\n/g, "\n");
      var utftext = "";
      for (var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n);
        if (c < 128) {
          utftext += String.fromCharCode(c);
        } else if (c > 127 && c < 2048) {
          utftext += String.fromCharCode((c >> 6) | 192);
          utftext += String.fromCharCode((c & 63) | 128);
        } else {
          utftext += String.fromCharCode((c >> 12) | 224);
          utftext += String.fromCharCode(((c >> 6) & 63) | 128);
          utftext += String.fromCharCode((c & 63) | 128);
        }
      }
      return utftext;
    },
    encode(input) {
      var _keyStr =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
      var output = "";
      var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
      var i = 0;
      input = this._utf8_encode(input);
      while (i < input.length) {
        chr1 = input.charCodeAt(i++);
        chr2 = input.charCodeAt(i++);
        chr3 = input.charCodeAt(i++);
        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;
        if (isNaN(chr2)) {
          enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
          enc4 = 64;
        }
        output =
          output +
          _keyStr.charAt(enc1) +
          _keyStr.charAt(enc2) +
          _keyStr.charAt(enc3) +
          _keyStr.charAt(enc4);
      }
      return output;
    },

    //发起授权
    authorize(type) {
      if (this.SessionObj.openId == "" && this.SessionObj.hasbind == false) {
        window.location.href = `${this.Interface.getWeixinHost}wx/oauth`;
        //结果重定向回当前页面或者跳转到绑定页
      } else {
        if (type == 1) {
          //第一个按钮
          this.share();
        } else {
          //第二个按钮
          this.shareCode();
        }
      }
    },
    //获取页面数据
    getInviteDetail() {
      try {
        let wxOpenId = document.getElementById("openid").innerText;
        if (wxOpenId !== "") {
          wxOpenId = JSON.parse(wxOpenId);
          let detail = JSON.parse(wxOpenId.detail);
          wxOpenId.detail = detail;
        }
        if (typeof wxOpenId == "object") {
          this.SessionObj.openId = wxOpenId.openid;
          this.SessionObj.inviteNum = wxOpenId.detail.friendCount;
          this.SessionObj.totalMon = wxOpenId.detail.totalAmount;
          this.SessionObj.readyMon = wxOpenId.detail.pendingAmount;
          this.SessionObj.invitationCode = wxOpenId.detail.invitationCode;
          this.SessionObj.hasbind = wxOpenId.detail.hasbind;
        }
      } catch (e) {}
    },
    goguide() {
      window.location.href = `${this.Interface.getH5}/inviteGuide.html`;
      // 跳转到攻略页面
    },
    shareCode() {
      var url = `${this.Interface.getWeixinHost}active/newRegist.html?userid=${
        this.SessionObj.invitationCode
      }`;
      url = this.encode(url);
      this.$http
        .get(this.Interface.getQrWeixin, {
          params: {
            content: url
          }
        })
        .then(res => {
          if (res.data.success) {
            var result = res.data.data;
            this.imgQrCode = "data:image/jpg;base64," + result.data;
            this.popupVisible = true;
            this.GetQrImgFlag = true;
          } else {
            alert(res.data.msg);
          }
        })
        .catch(function(error) {
          this.Toast("网络异常，请刷新后重试~");
          console.log(error);
        });
    },
    closepopup() {
      this.popupVisible = false;
    },
    share() {
      //注册微信分享功能
      var _this = this;
      this.$http
        .get(
          `${this.Interface.getWeixinHost}wx/config?url=${window.location.href}`
        )
        .then(res => {
          res.data.debug = false;
          wx.config(res.data);

          _this.shadown = true;
          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: "优选合伙人", // 分享标题
              link: `${
                _this.Interface.getWeixinHost
              }active/newRegist.html?code=${_this.SessionObj.invitationCode}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: "https://r.imuzhuang.com/static/youxuan/active/icon.png", // 分享图标
              success: function() {
                _this.shadown = false;
              },
              cancel: function() {
                _this.shadown = false;
              }
            });

            wx.onMenuShareAppMessage({
              title: "优选合伙人", // 分享标题
              desc: "加入优选 奖励无限", // 分享描述
              link: `${
                _this.Interface.getWeixinHost
              }active/newRegist.html?code=${_this.SessionObj.invitationCode}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: "https://r.imuzhuang.com/static/youxuan/active/icon.png", // 分享图标
              success: function() {
                _this.shadown = false;

                // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                _this.shadown = false;
              }
            });
          });
        });
    },
    showRules() {
      this.popupRules = true;
      $("body").addClass("modalShow");
    },
    closeRules() {
      this.popupRules = false;
      $("body").removeClass("modalShow");
    }
  }
};
</script>

<style lang="less">
.page-invite {
  .shadown {
    z-index: 10001;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    img {
      position: fixed;
      top: 10px;
      right: 50px;
      width: 308px;
      height: 231px;
    }
  }
  // 上面
  header {
    position: relative;
    .h-time {
      position: absolute;
      left: 50%;
      top: 425px;
      transform: translate(-50%, 0);
      color: #a3a9f4;
      font-size: 18px;
      text-align: center;
    }
    .h-data {
      position: absolute;
      top: 485px;
      left: 50%;
      transform: translate(-50%, 0);
      display: -webkit-box;
      box-sizing: border-box;
      width: 690px;
      height: 140px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin: 0 auto;
      background: #fff;
      & > div {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        position: relative;
        -webkit-box-flex: 1;
        height: 140px;
        text-align: center;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        color: #666;
        p {
          font-size: 40px;
          color: #f2616d;
          margin-top: 20px;
        }
        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(0, -50%);
          width: 1px;
          height: 85px;
          content: "";
          background: #e5e5e5;
        }
      }

      .h-data-ready:after {
        display: none;
      }
    }
  }
  // 活动规则
  .rules-box {
    width: 600px;
    height: 800px;
    border-radius: 10px;
    background: #fff;
    margin-top: -90px;
    box-sizing: border-box;
    padding: 50px 45px;
    h4 {
      font-size: 30px;
      color: #282828;
      font-weight: normal;
      text-align: center;
      margin-bottom: 30px;
    }
    .rules-body {
      font-size: 30px;
      line-height: 50px;
      color: #000;
      text-align: justify;
    }
    .rules-close {
      position: absolute;
      left: 50%;
      top: 850px;
      width: 68px;
      height: 68px;
      transform: translate(-50%, 0);
      background: url("../../public/imgs/invite/img-dialog-btn.png") 0 0
        no-repeat;
      background-size: 68px 68px;
    }
  }
  // 底部按钮
  .btn-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 110px;
    display: -webkit-box;
    background: linear-gradient(#ffa442, #ff4d5c);
    z-index: 1000;
    .btn {
      height: 100%;
      -webkit-box-flex: 1;
      display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      font-size: 30px;
      color: #fff;
      &.btn-share-url {
        position: relative;
        &:after {
          position: absolute;
          width: 2px;
          height: 70px;
          right: 0;
          top: 50%;
          transform: translate(0, -50%);
          content: "";
          background: #fff;
        }
      }
    }
  }
  // 侧边悬浮按钮
  .btn-fixed-left {
    position: fixed;
    right: 0;
    top: 50%;
    width: 60px;
    height: 314px;
    transform: translate(0, -50%);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    .btn-rule,
    .btn-help {
      width: 100%;
      font-size: 26px;
      color: #fff;
      writing-mode: vertical-lr;
      height: 143px;
      border-radius: 5px 0 0 5px;
      text-align: center;
      padding-left: 15px;
    }
    .btn-rule {
      background: #ffa442;
      margin-bottom: 38px;
    }
    .btn-help {
      background: #ff4d5c;
    }
  }
}

.body-invite {
  &.modalShow {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  // 模态框
  .mint-msgbox-wrapper {
    .mint-msgbox {
      width: 600px;
      top: 42%;
      overflow: visible;
      border-radius: 15px;

      box-sizing: border-box;
      .mint-msgbox-title {
        font-size: 30px;
        color: #000;
        height: 100px;
        line-height: 100px;
        font-weight: normal;
      }
      .mint-msgbox-content {
        border: none;
      }
      .mint-msgbox-message {
        font-size: 30px;
        color: #000;
        text-align: justify;
        box-sizing: border-box;
        padding: 0 20px 30px;
        line-height: 50px;
      }
      .mint-msgbox-btns {
        position: absolute;
        width: 68px;
        height: 68px;
        display: block;
        left: 50%;
        bottom: -130px;
        .mint-msgbox-confirm {
          position: absolute;
          width: 68px;
          height: 68px;
          transform: translate(-50%, 0);
          background: url("../../public/imgs/invite/img-dialog-btn.png") 0 0
            no-repeat;
          background-size: 68px 68px;
          font-size: 0;
        }
      }
    }
  }

  // 分享弹框
  .popup-qrcode {
    position: fixed;
    width: 100%;
    height: 100%;

    .p-qrcode-header {
      width: 750px;
      height: 437px;
      box-sizing: border-box;
      padding: 340px 0 0 0;
      background: url("../../public/imgs/invite/img-invite-h.jpg") 0 0 no-repeat;
      background-size: 750px 437px;
      p {
        font-size: 30px;
        color: #5577fa;
        text-align: center;
        height: 50px;
        line-height: 50px;
      }
    }

    .p-qucode-body {
      width: 750px;
      height: 485px;
      background: url("../../public/imgs/invite/icon-invite-qr-bg.jpg") 0 0
        no-repeat;
      background-size: 750px 485px;
      margin: 50px 0 0 0;

      img {
        display: block;
        width: 100%;
        max-width: 100%;
        border: none;
        width: 252px;
        height: 252px;
        margin: 0 auto;
      }
    }

    .popup-qrcode-close {
      position: relative;
      left: 50%;
      top: 50px;
      transform: translate(-50%, 0);
      width: 60px;
      height: 60px;
      background: #fff url("../../public/imgs/invite/img-share-close.jpg")
        center no-repeat;
      // background: transparent;
      background-size: 30px 30px;
    }
  }
  /* 合伙人背景设置 */
  .v-modal {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.8);
  }
}
</style>
